<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASR语音识别演示</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
</head>
<body>
    <div class="container">
        <header>
            <h1>ASR语音识别演示</h1>
            <p class="subtitle">体验音频转文字和实时麦克风识别功能</p>
        </header>
        
        <main>
            <section class="feature-section">
                <h2>1. 音频文件转文字</h2>
                <div class="upload-area">
                    <input type="file" id="audioFile" accept="audio/*" class="file-input">
                    <label for="audioFile" class="file-label">
                        <span class="upload-icon">📁</span>
                        <span class="upload-text">选择音频文件</span>
                    </label>
                    <button class="btn btn-primary" onclick="uploadAudio()">上传并识别</button>
                </div>
                <div class="file-info" id="fileInfo" style="display: none;">
                    <span id="fileName"></span>
                    <span id="fileSize"></span>
                </div>
            </section>
            
            <section class="feature-section">
                <h2>2. 实时麦克风识别</h2>
                <div class="realtime-controls">
                    <button class="btn btn-success" onclick="startRealtime()">
                        <span class="btn-icon">🎤</span>
                        开始实时识别
                    </button>
                    <button class="btn btn-danger" onclick="stopRealtime()">
                        <span class="btn-icon">⏹️</span>
                        停止识别
                    </button>
                </div>
                <div class="status-indicator">
                    <div class="status-dot" id="statusDot"></div>
                    <span id="status">状态: 未连接</span>
                </div>
            </section>
            
            <section class="result-section">
                <h2>识别结果</h2>
                <div class="result-container">
                    <div id="result" class="result-text">等待识别结果...</div>
                    <div class="result-actions">
                        <button class="btn btn-secondary" onclick="clearResult()">清空结果</button>
                        <button class="btn btn-secondary" onclick="copyResult()">复制结果</button>
                    </div>
                </div>
            </section>
        </main>
        
        <footer>
            <div class="tips">
                <h3>使用提示</h3>
                <ul>
                    <li>支持的音频格式：WAV, MP3, M4A, FLAC, OGG</li>
                    <li>建议音频文件大小不超过50MB</li>
                    <li>实时识别需要浏览器麦克风权限</li>
                    <li>识别效果受音频质量影响</li>
                </ul>
            </div>
        </footer>
    </div>
    
    <!-- 加载提示 -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在识别中...</div>
    </div>
    
    <!-- 通知消息 -->
    <div id="notification" class="notification" style="display: none;">
        <span id="notificationText"></span>
        <button onclick="hideNotification()" class="notification-close">×</button>
    </div>
    
    <script src="/static/js/app.js"></script>
</body>
</html>
